<template>
  <view class="container">
    <view class="top-bar">
      <navigator class="back-btn"  @click="goBack">←</navigator>
      <text class="title">我的预约</text>
      <view class="filter-btn" @click="showFilter = !showFilter">
        <text>筛选</text>
      </view>
    </view>


    <view class="filter-panel" v-if="showFilter">
      <view class="filter-options">
        <view 
          v-for="(option, index) in filterOptions" 
          :key="index"
          :class="['filter-option', activeFilter === option.value ? 'active' : '']"
          @click="changeFilter(option.value)"
        >
          <text>{{option.label}}</text>
        </view>
      </view>
    </view>

   
    <scroll-view scroll-y="true" class="content" :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
     
      <view class="stats-cards">
        <view class="stat-card">
          <text class="stat-number">{{appointments.length}}</text>
          <text class="stat-label">总预约</text>
        </view>
        <view class="stat-card">
          <text class="stat-number">{{pendingCount}}</text>
          <text class="stat-label">待确认</text>
        </view>
        <view class="stat-card">
          <text class="stat-number">{{confirmedCount}}</text>
          <text class="stat-label">已确认</text>
        </view>
        <view class="stat-card">
          <text class="stat-number">{{completedCount}}</text>
          <text class="stat-label">已完成</text>
        </view>
      </view>

      
      <view class="appointment-list">
        <view v-if="filteredAppointments.length === 0" class="empty-state">
          <text class="empty-icon">📅</text>
          <text class="empty-text">暂无预约记录</text>
          <text class="empty-desc">快去为家人预约一次探访服务吧</text>
          <button class="empty-btn" @click="goToNewAppointment">立即预约</button>
        </view>

        <view v-else>
          <view 
            v-for="(item, index) in filteredAppointments" 
            :key="index" 
            class="appointment-card"
            @click="viewAppointmentDetail(item)"
          >
            <view class="card-header">
              <text class="elderly-name">{{item.elderlyName}}</text>
              <view :class="['status-badge', `status-${item.status}`]">
                <text>{{getStatusText(item.status)}}</text>
              </view>
            </view>
            
            <view class="card-content">
              <view class="info-row">
                <text class="info-label">探访时间</text>
                <text class="info-value">{{item.visitDate}} {{item.visitTime}}</text>
              </view>
              
              <view class="info-row">
                <text class="info-label">探访时长</text>
                <text class="info-value">{{item.duration}}小时</text>
              </view>
              
              <view class="info-row">
                <text class="info-label">志愿者</text>
                <text class="info-value">{{item.volunteerName || '待分配'}}</text>
              </view>
              
              <view class="info-row">
                <text class="info-label">地址</text>
                <text class="info-value address">{{item.address}}</text>
              </view>
            </view>
            
            <view class="card-footer">
              <text class="create-time">创建时间: {{item.createTime}}</text>
              <view class="actions">
                <button v-if="item.status === 'pending'" class="btn-cancel" @click.stop="cancelAppointment(item)">取消预约</button>
                <button v-if="item.status === 'confirmed'" class="btn-contact" @click.stop="contactVolunteer(item)">联系志愿者</button>
                <button class="btn-detail" @click="viewAppointmentDetail">查看详情</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    
    <view class="bottom-bar">
      <button class="new-appointment-btn" @click="goToNewAppointment">
        <text class="btn-icon">+</text>
        <text class="btn-text">新建预约</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showFilter: false,
      activeFilter: 'all',
      refreshing: false,
      filterOptions: [
        { label: '全部', value: 'all' },
        { label: '待确认', value: 'pending' },
        { label: '已确认', value: 'confirmed' },
        { label: '进行中', value: 'in_progress' },
        { label: '已完成', value: 'completed' },
        { label: '已取消', value: 'cancelled' }
      ],
      appointments: [
        {
          id: 1,
          elderlyName: '李奶奶',
          visitDate: '2023-11-20',
          visitTime: '14:00',
          duration: 2,
          volunteerName: '张志愿者',
          address: '幸福小区3栋2单元501室',
          status: 'confirmed',
          createTime: '2023-11-15 10:30'
        },
        {
          id: 2,
          elderlyName: '王爷爷',
          visitDate: '2023-11-22',
          visitTime: '10:00',
          duration: 1.5,
          volunteerName: '',
          address: '阳光家园5栋1单元302室',
          status: 'pending',
          createTime: '2023-11-16 14:20'
        },
        {
          id: 3,
          elderlyName: '赵奶奶',
          visitDate: '2023-11-18',
          visitTime: '15:30',
          duration: 2,
          volunteerName: '刘志愿者',
          address: '平安里7栋3单元601室',
          status: 'completed',
          createTime: '2023-11-10 09:15'
        }
      ]
    }
  },
  computed: {
    filteredAppointments() {
      if (this.activeFilter === 'all') {
        return this.appointments
      }
      return this.appointments.filter(item => item.status === this.activeFilter)
    },
    pendingCount() {
      return this.appointments.filter(item => item.status === 'pending').length
    },
    confirmedCount() {
      return this.appointments.filter(item => item.status === 'confirmed').length
    },
    completedCount() {
      return this.appointments.filter(item => item.status === 'completed').length
    }
  },
  methods: {
    goBack() {
      uni.navigateTo({
      	url:"/pages/regularUser/quickFuction/appointCard/appointCard"
      })
    },
    changeFilter(value) {
      this.activeFilter = value
      this.showFilter = false
    },
    onRefresh() {
      this.refreshing = true
      // 模拟刷新数据
      setTimeout(() => {
        this.refreshing = false
        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        })
      }, 1000)
    },
    getStatusText(status) {
      const statusMap = {
        'pending': '待确认',
        'confirmed': '已确认',
        'in_progress': '进行中',
        'completed': '已完成',
        'cancelled': '已取消'
      }
      return statusMap[status] || '未知'
    },
    viewAppointmentDetail() {
      uni.navigateTo({
        // url: `/pages/regularUser/appointment/detail?id=${item.id}`
		url:'/pages/regularUser/quickFuction/appointList/appointDetail/appointDetail'
      })
    },
    cancelAppointment(item) {
      uni.showModal({
        title: '确认取消',
        content: `确定要取消${item.elderlyName}的探访预约吗？`,
        success: (res) => {
          if (res.confirm) {
            // 模拟取消操作
            item.status = 'cancelled'
            uni.showToast({
              title: '预约已取消',
              icon: 'success'
            })
          }
        }
      })
    },
    contactVolunteer(item) {
      uni.navigateTo({
        url: `/pages/regularUser/chat/chat?volunteerId=${item.volunteerId}&volunteerName=${item.volunteerName}`
      })
    },
    goToNewAppointment() {
      uni.navigateTo({
        url: '/pages/regularUser/quickFuction/appointment/appointment'
      })
    }
  }
}
</script>

<style>
page {
  background-color: #f8f8f8;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}


.top-bar {
  padding: 15px 20px;
  background-color: #FD995E;
  display: flex;
  align-items: center;
  height: 60px;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(255, 87, 34, 0.2);
}

.back-btn {
  font-size: 24px;
  color: white;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.2);
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-align: center;
  flex: 1;
}

.filter-btn {
  color: white;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 15px;
  background-color: rgba(255,255,255,0.2);
}


.filter-panel {
  background-color: white;
  padding: 15px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 10;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-option {
  padding: 8px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  background-color: #f9f9f9;
  font-size: 14px;
  transition: all 0.3s;
}

.filter-option.active {
  background-color: #fff3e0;
  border-color: #ff9800;
  color: #ff9800;
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 15px;
  box-sizing: border-box;
}

.stats-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  background-color: white;
  border-radius: 12px;
  padding: 15px 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin: 0 5px;
}

.stat-number {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #ff5722;
  margin-bottom: 5px;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #666;
}


.appointment-list {
  margin-bottom: 80px;
}

.appointment-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: all 0.3s;
}

.appointment-card:active {
  transform: scale(0.995);
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.elderly-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.status-pending {
  background-color: #fff3e0;
  color: #ff9800;
}

.status-confirmed {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status-in_progress {
  background-color: #e3f2fd;
  color: #2196f3;
}

.status-completed {
  background-color: #f3e5f5;
  color: #9c27b0;
}

.status-cancelled {
  background-color: #f5f5f5;
  color: #9e9e9e;
}

.card-content {
  margin-bottom: 15px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.info-label {
  font-size: 14px;
  color: #666;
  width: 70px;
}

.info-value {
  font-size: 14px;
  color: #333;
  flex: 1;
  text-align: right;
}

.address {
  color: #888;
  font-size: 13px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.create-time {
  font-size: 12px;
  color: #999;
}

.actions {
  display: flex;
  gap: 8px;
}

.actions button {
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 12px;
  border: none;
}

.btn-cancel {
  background-color: #ffebee;
  color: #f44336;
}

.btn-contact {
  background-color: #e3f2fd;
  color: #2196f3;
}

.btn-detail {
  background-color: #f3e5f5;
  color: #9c27b0;
}


.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  display: block;
  font-size: 60px;
  margin-bottom: 15px;
}

.empty-text {
  display: block;
  font-size: 16px;
  color: #666;
  margin-bottom: 8px;
}

.empty-desc {
  display: block;
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}

.empty-btn {
  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0 30px;
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
}


.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 20px;
  background-color: white;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.new-appointment-btn {
  background-color: #FD995E;
  color: white;
  border: none;
  border-radius: 25px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
}

.btn-icon {
  font-size: 20px;
  margin-right: 8px;
}
</style>
